<!-- 消息中心 -->
<template>
    <div class="r_top">
        <TitleInfo title="消息中心"></TitleInfo>
        <ol>
            <li class="select" @click="changeCheckAll">全选</li>
            <li @click="removeMessage">删除</li>
            <li @click="read">标记已读</li>
        </ol>
    </div>
    <ul>
        <li v-for="(item,index) in messageList" :key="item.id">
            <div class="top">

                  <h3><el-checkbox v-model="item.check" @change="changeCheck(index,item)"  size="large" />{{ item.name }}
                    <el-badge is-dot class="item" v-if="item.status == 0"></el-badge>
                  </h3>

                <div class="right">
                    <span @click="zk(item)">
                        展开
                        <el-icon>
                            <ArrowDown v-if="!item.show" /> 
                            <ArrowUp v-if="item.show" />
                        </el-icon>
                    </span>
                    <span>{{ item.createTime }}</span>
                </div>
            </div>
            <div class="down"> 
                <p :class="item.show?'':'showP'">{{ item.context }}</p>
            </div>
        </li>
        
    </ul>
</template>
<script setup lang="ts">
import type { MessageModel } from '@/api/person/message'
import { messageApi ,messageReadApi,messageDeleteApi } from '@/api/person/message'
const messageList=ref<MessageModel[]>([])
async function getMessageLists(){
  const res=await messageApi()
  if(res.code==200){
    messageList.value=res.data as MessageModel[] || []
  }
}
const selectedRowKeys=ref<MessageModel[]>([])
function changeCheck(index:number,record:MessageModel){
    console.log(record,'record')
    if(!record.check){
        selectedRowKeys.value.splice(index,1)
    }else{
        selectedRowKeys.value.push(record)
    }
    console.log(selectedRowKeys.value,'selectedRowKeys')
}

function changeCheckAll(){
    selectedRowKeys.value=[]
    if(messageList.value.length>0){
        messageList.value.forEach((item)=>{
            item.check=true
            selectedRowKeys.value.push(item)
        })
    }
}
async function removeMessage(){
    if(selectedRowKeys.value.length===0){
        ElMessage.error('请选择要删除的信息')
        return false
    }
   const res=await messageDeleteApi(selectedRowKeys.value)
   if(res.code===200){
       ElMessage.success('删除成功')
       selectedRowKeys.value=[]
       getMessageLists()
   }else{
       ElMessage.error(res.msg)

   }
}
async function read(){
    if(selectedRowKeys.value.length===0){
        ElMessage.error('请选择要标记的信息')
        return false
    }
   const res=await messageReadApi(selectedRowKeys.value)
   if(res.code===200){
       ElMessage.success('标记成功')
       messageList.value.forEach(item=>{
        selectedRowKeys.value.forEach(row=>{
            if(item.id===row.id){
                item.status=1
                item.check=false
            }
        })
       })
       selectedRowKeys.value=[] 
   }else{
       ElMessage.error(res.msg)

   }
}

function zk(record:MessageModel){
    if(record.show===undefined || record.show===false){
        record.show=true
        messageReadApi([record])
        record.status=1
    }else{
        record.show=false
    }
    
}

onMounted(()=>{
  getMessageLists()
})

</script>
<style scoped lang='less'>
.r_top {
    position: relative;
    padding: 0 26px 30px 27px;
}

.title {
    max-width: 827px;
    width: 100%;
    font-size: 0;
    padding-bottom: 22px;
    padding-left: 13px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

.title img {
    vertical-align: text-bottom;
}

.down {
    p {
        color: #959798;
    }
}

.showP{

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

}

.r_top .title h2 {
    display: inline-block;
    font-size: 30px;
    line-height: 1;
    color: #333;
    margin-left: 14px;
}

.r_top ol {
    position: absolute;
    display: flex;
    top: 0;
    right: 26px;
}

.r_top ol li {

    font-size: 14px;
    line-height: 1;
    color: #252d2e;
    padding: 8px 17px;
    margin-right: 10px;
    border: solid 1px #e6e6e6;
    cursor: pointer;
    list-style: none;
}

ul {
    padding: 0 35px 23px 35px;


    li {
        border-bottom: 1px solid #efebeb;
        padding: 15px 0;
        cursor: pointer;

        >div {
            padding: 5px 0;
        }
    }
}

.top {
    display: flex;
    justify-content: space-between;

    .right {
        font-size: 14px;

        span:first-child {
            cursor: pointer;
            color: #345aa3;
            margin: 0 20px;
        }
    }
}

h3 {
    color: #272727;
    font-weight: normal;
}

:deep(.el-icon) {
    vertical-align: middle;
}
</style>
